<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pieData" text="采销占比"></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-bar style="height: 300px;" :value="barData" text="近七日销售量"/>
        </Card>
      </i-col>
    </Row>
    <!-- <Row>
      <Card shadow>
        <example style="height: 310px;"/>
      </Card>
    </Row> -->
  </div>
</template>

<script>
import { _chartsDay, _count, _pie } from '@/api/index.js'
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data () {
    return {
      inforCardData: [
        { title: '加盟商', icon: 'md-person-add', count: 0, color: '#2d8cf0' },
        { title: '供应商', icon: 'md-locate', count: 0, color: '#19be6b' },
        { title: '仓库数', icon: 'md-chatbubbles', count: 0, color: '#E46CBB' },
        { title: '成品数', icon: 'md-map', count: 0, color: '#9A66E4' },
        { title: '采购数', icon: 'md-analytics', count: 0, color: '#009688' },
        { title: '原材料数', icon: 'md-share', count: 0, color: '#ed3f14' },
      ],
      pieData: [
        {value: 10, name: '采购'},
        {value: 10, name: '销售'},
      ],
      barData: {
        Mon: 0,
        Tue: 0,
        Wed: 0,
        Thu: 0,
        Fri: 0,
        Sat: 0,
        Sun: 0
      }
    }
  },
  mounted () {
    _chartsDay({}).then( res => {
      this.barData = res.data.data
    })
    _count({}).then( res => {
      this.inforCardData[0].count = res.data.data.alliance
      this.inforCardData[1].count = res.data.data.supplier
      this.inforCardData[2].count = res.data.data.warehouse
      this.inforCardData[3].count = res.data.data.product
      this.inforCardData[4].count = res.data.data.order
      this.inforCardData[5].count = res.data.data.finished
    })
    _pie({}).then( res => {
      this.pieData = 
      [
        {value: res.data.data.order, name: '采购'},
        {value: res.data.data.stock, name: '销售'},
      ]
      // this.pieData[1].value = res.data.data.stock
    })
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}
</style>
